<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 头部导航容器 -->
    <header class="header">
        <!-- 头部版心 -->
        <div class="hearderCenter clearfix">
            <!-- 左侧导航 -->
            <ul class="hearderCenterL">
                <li>欢迎来到尚优选！请</li>
                <li><a href="javascript:;">登录</a></li>
                <li class="lixL"></li>
                <li><a href="javascript:;">注册</a></li>
            </ul>
            <!-- 右侧导航 -->
            <ul class="hearderCenterR">
                <li><a href="javascript:;">我的订单</a></li>
                <li class="lixR"></li>
                <li><a href="javascript:;">我的购物车</a></li>
                <li class="lixR"></li>
                <li><a href="javascript:;">我的尚优选</a></li>
                <li class="lixR"></li>
                <li><a href="javascript:;">尚优选会员</a></li>
                <li class="lixR"></li>
                <li><a href="javascript:;">企业采购</a></li>
                <li class="lixR"></li>
                <li><a href="javascript:;">关注尚优选</a></li>
                <li class="lixR"></li>
                <li><a href="javascript:;">合作招商</a></li>
                <li class="lixR"></li>
                <li><a href="javascript:;">商家后台</a></li>
            </ul>
        </div>
    </header>
    <!-- logo和搜索框容器 -->
    <div class="logoAndSeachWarper">
        <!-- logo和搜索框版心 -->
        <div class="logoAndSeach clearfix">
            <!-- 左侧logo -->
            <div class="logo">
                <a href="javascript:;"><img src="./images/logo.png" alt=""></a>
            </div>
            <!-- 右侧搜索框 -->
            <div class="seach">
                <input type="text" placeholder="请输入搜索内容">
                <button type="submit">搜索</button>
            </div>
        </div>
    </div>
    <!-- 商品分类容器 -->
    <div class="shopListWarper">
        <!-- 商品分类版心 -->
        <div class="shopList clearfix">
            <a href="javascript:;">全部商品分类</a>
            <a href="javascript:;">服装城</a>
            <a href="javascript:;">美妆馆</a>
            <a href="javascript:;">尚优选超市</a>
            <a href="javascript:;">全球购</a>
            <a href="javascript:;">闪购</a>
            <a href="javascript:;">团购</a>
            <a href="javascript:;">有趣</a>
            <a href="javascript:;">秒杀</a>
        </div>
    </div>
    <!-- 商品详情容器 -->
    <div id="actWarper">
        <!-- 商品详情版心 -->
        <div id="actContent" class="clearfix">
            <!-- 路径导航 -->
            <div id="actList"></div>
            <!-- 左侧内容区 -->
            <div id="content">
                <!-- 左侧小图 -->
                <div id="smallImg">
                    <!-- 蒙版 -->
                    <!-- <div id="hover"></div> -->
                    <img src="images/s1.png" alt="">
                </div>
                <!-- 大图放大镜 -->
                <!-- <div id="bigImg">
                    <img src="images/b1.png" alt="">
                </div> -->
                <!-- 图片列表 -->
                <div class="leftBottom">
                    <a href="javascript:;" class="prev">&lt;</a>
                    <!-- 图片列表内容容器 -->
                    <div class="imglistWarper">
                        <!-- 图片列表内容 -->
                        <ul>
                            <!-- <li><img src="images/s1.png" alt=""></li>
                            <li><img src="images/s1.png" alt=""></li>
                            <li><img src="images/s1.png" alt=""></li>
                            <li><img src="images/s1.png" alt=""></li>
                            <li><img src="images/s1.png" alt=""></li>
                            <li><img src="images/s1.png" alt=""></li>
                            <li><img src="images/s1.png" alt=""></li> -->
                        </ul>
                    </div>
                    <a href="javascript:;" class="next">&gt;</a>
                </div>
            </div>
            <!-- 右侧详情信息 -->
            <div class="rightDetail">
                <h3>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h3>
                <p>推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p>
                <div class="money">
                    <div class="moneyTop">
                        <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
                        <i>￥</i>
                        <span>5299</span>
                        <span>降价通知</span>
                        <span>累计评价 670000</span>
                    </div>
                    <div class="moneyBottom">
                        <span>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                        <span>加购价</span>
                        <p>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</p>
                    </div>
                </div>
                <div class="oldAndNew">
                    <span>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</span>
                    <p>以旧换新，闲置手机回收 4G套餐超值抢 礼品购</p>
                </div>
                <div class="address">
                    <span>配 送 至</span>
                    <p>广东省 深圳市 宝安区</p>
                </div>
                <dl>
                    <dt>选择颜色</dt>
                    <dd>金色</dd>
                    <dd>银色</dd>
                    <dd>黑色</dd>
                </dl>
                <dl>
                    <dt>内存容量</dt>
                    <dd>16G</dd>
                    <dd>64G</dd>
                    <dd>128G</dd>
                </dl>
            </div>
        </div>
    </div>
    <script src="js/data.js"></script>
    <script src="js/index.js"></script>
</body>
</html>